<template>
    <div class="page">

        <div class="head-box">
            <div class="title">主板上市公司全资子公司物业合同债权ABS </div>
            <div class="data-box">
                <span class="key">金额</span>
                <span class="value">13000万</span>
            </div>
            <div class="data-box">
                <span class="key">预期年化收益率</span>
                <span class="value">7.0-7.5%</span>
            </div>
            <div class="data-box">
                <span class="key">期限</span>
                <span class="value">2+2+1年</span>
            </div>
        </div>

        <div class="title-view">基本信息</div>
        <div class="form-view">
            <input-box label="姓名" placeholder="（必填）请输入联系人姓名" v-model="name"/>
            <input-box label="性别" type="select" placeholder="请选择" v-model="sex" @onclick="showSelectSex=true"/>
            <input-box label="联系电话" placeholder="（必填）请输入联系电话" v-model="mobile"/>
            <input-box label="邮箱" placeholder="请输入邮箱" v-model="email"/>
            <input-box label="所在单位" placeholder="请输入所在单位" v-model="company"/>
            <input-box label="职务" placeholder="请输入职务" v-model="job"/>
            <input-box label="意向日期" type="date" placeholder="请选择" :value="date[0]" @onclick="showSelectDate=true"/>
        </div>

        <bottom-popup-select v-model="showSelectSex" title="选择性别" :items="sexList" @onselect="handleSelectSex"/>
        <select-date v-model="date" hide-btn="true" :show-view="showSelectDate" @onhide="showSelectDate=false"/>

        <div class="title-view">预约要求</div>
        <textarea v-model="description" class="description-input" placeholder="如有需要补充的信息请填在此处"></textarea>

        <bottom-btn text="提交" @onclick="handleSubmit"/>

    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{
        background-color: @color-bg-gray;
        padding-top: 1rem;
        padding-bottom: 9.2rem;

        .head-box{
            padding: 1.5rem 2rem;
            background-color: @color-white;
            .title{
                font-size: 1.5rem;
                line-height: 2.1rem;
                padding: .2rem 0 .5rem;
            }
            .data-box{
                font-size: 1.4rem;
                line-height: 2rem;
                margin-top: 1rem;
                .key{
                    color: @color-text-gray;
                }
                .value{
                    float: right;
                }
            }
        }

        .title-view{
            font-size: 1.4rem;
            color: @color-text-gray;
            line-height: 3rem;
            margin-top: 1.3rem;
            margin-left: 1.5rem;
        }
        .form-view{
            background-color: @color-white;
        }

        .description-input{
            height: 8.6rem;
            padding: 1rem 1.5rem;
            font-size: 1.5rem;
            line-height: 2.6rem;
        }

    }

</style>

<script>
    export default {
        data (){
            return {
                name: '',
                sex: '',
                sexList: ['男', '女'],
                showSelectSex: false,
                mobile: '',
                email: '',
                company: '',
                job: '',
                date: [],
                showSelectDate: false,
                description: ''
            }
        },
        methods: {
            handleSubmit(){
                alert('submit');
            },
            handleSelectSex(key){
                this.sex = this.sexList[key];
            },
            handleSelectDate(){
            }
        },
        created(){
            this.$store.commit('hideNav', true);
        }
    }
</script>